import React, { useState } from 'react';
import { Form, Input, Button, message, Row, Col } from 'antd';
import { useSelector } from 'react-redux';

import { sendCaptcha } from '@/api/auth';
import Dialog from '@/components/common/Dialog';

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};
export default function ForPasDialog(props) {
    const { open, onOk, onCancel } = props;
    const [form] = Form.useForm();

    const { userInfo } = useSelector((state) => state.auth);
    // 倒计时剩余时间
    const [captchaCooldown, setCaptchaCooldown] = useState(0);
    // 发送状态
    const [isSendingCaptcha, setIsSendingCaptcha] = useState(false);

    // 发送验证码处理函数
    const handleSendCaptcha = async () => {
        try {
            setIsSendingCaptcha(true);
            // 调用发送验证码接口
            await sendCaptcha({ email: userInfo?.email });
            message.success('验证码已发送至您的邮箱');

            // 开始倒计时
            let countdown = 60;
            setCaptchaCooldown(countdown);
            const timer = setInterval(() => {
                countdown -= 1;
                setCaptchaCooldown(countdown);
                if (countdown <= 0) {
                    clearInterval(timer);
                }
            }, 1000);
        } catch (error) {
            console.error('发送验证码失败:', error);
        } finally {
            setIsSendingCaptcha(false);
        }
    };
    return (
        <Dialog
            title="修改密码"
            dialogOpen={open}
            onOk={() => form.submit()}
            onCancel={onCancel}
            okText="提交"
            cancelText="取消"
            style={{
                width: 400,
                height: 300,
            }}
        >
            <Form
                form={form}
                {...formItemLayout}
                style={{ marginTop: 24 }}
                onFinish={(values) => {
                    console.log('表单值:', values);
                    onOk(values);
                }}
            >
                <Form.Item name="password" label="新密码" rules={[{ required: true, message: '请输入新密码!' }]}>
                    <Input.Password placeholder="请输入新密码" />
                </Form.Item>

                <Form.Item
                    name="confirmPassword"
                    label="确认密码"
                    dependencies={['password']}
                    rules={[
                        { required: true, message: '请再次输入新密码!' },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error('两次输入的密码不一致!'));
                            },
                        }),
                    ]}
                >
                    <Input.Password placeholder="请确认新密码" />
                </Form.Item>

                <Form.Item label="验证码" name="captcha" rules={[{ required: true, message: '请输入验证码!' }]}>
                    <Row gutter={8}>
                        <Col span={14}>
                            <Input placeholder="6位验证码" style={{ width: '100%' }} />
                        </Col>
                        <Col span={10}>
                            <Button
                                onClick={handleSendCaptcha}
                                disabled={captchaCooldown > 0 || isSendingCaptcha}
                                style={{ width: '100%' }}
                            >
                                {isSendingCaptcha
                                    ? '发送中...'
                                    : captchaCooldown > 0
                                      ? `${captchaCooldown}秒后重试`
                                      : '发送验证码'}
                            </Button>
                        </Col>
                    </Row>
                </Form.Item>
            </Form>
        </Dialog>
    );
}
